<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>初识Vue</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器 -->
  <div id="root">
    <h1>Hello,{{name}}</h1>
    <h1>My age: {{age}}</h1>

  </div>

  <!-- 
    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2. root容器哩的代码依然符合html规范，只不过混入了一些特殊的Vue语法
    3. root容器哩的代码被称为Vue模板
    4. Vue实例和容器是一一对应的
    5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用
    6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        js表达式 和 js代码 的区别：
        1. 表达式：一个表达式会生成一个值，可以放在任何一个需要值的位置
          (1) a
          (2) a+b
          (3) demo(1)
          (4) x==y ? 'a':'b'
        2. 代码(语句)
          (1) if(){}
          (2) for(){}
    7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

  -->


  <script type="text/javascript">
    Vue.config.productionTip = false

    // 创建Vue实例
    const x = new Vue({
      // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
      el: '#root',
      // data中用于存储数据，数据供el所指定的容器去使用
      data: {
        name: 'ccc',
        age: 22
      }

    })
  </script>
</body>

</html>